<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>March</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<!--<link rel='stylesheet prefetch' href='css/min.css'>-->
<link rel="stylesheet" type="text/css" href="css/styles.css">
<style>
	body{
		font-family: "微软雅黑";
	}
	 .fa-close{
		 background-image: url(img/x.png);
		 background-size: 100% 100%;
		 z-index: 111;
		 width: 40px;
		 height: 40px;
	 }
	 i.fa{
		  display: block;
      width: 35px;
			height: 30px;
			margin: 10px auto;
			background-size: 100% 100%;
	 }
	 .fa-email{
		 background-image: url(img/email.png);
	 }
	 .fa-qq{ 
		  background-image: url(img/qq1.png);
	 } 
	 .fa-weibo{
       background-image: url(img/weibo.png);
			 background-position: 50% 50%;

	 }
	 .fa-weixin{
       background-image: url(img/weixin.png);
	 }
	 .fa-leaf{
		   background-image: url(img/face.jpg);
	 }
</style>
</head>
<body>

<!-- 代码部分begin -->
<section class="strips">
  <article class="strips__strip">
	<div class="strip__content" style="opacity: 1;">
	  <h1 class="strip__title" data-name="Lorem">Task</h1>
	  	 <div class="strip__inner-text">
	  	<p><a href="小米商城pc/index.html" target="_blank">小米商城PC</a></p>
	  	<p><a href="https://mail.qq.com" target="_blank">Email</a></p>
		<p>
		  <a href="https://mail.qq.com" target="_blank"><i class="fa fa-email"></i></a>
		</p>		
		</div>
	</div>
  </article>

  <article class="strips__strip">
	<div class="strip__content">
	  <h1 class="strip__title" data-name="Ipsum">Words</h1>
	  <div class="strip__inner-text">
		<h2>Ettrics</h2>
		<p>QQ</p>
		<p><a href="#" target="_blank"></a></p>
		<p>
		  <a href="http://user.qzone.qq.com" target="_blank"><i class="fa fa-qq"></i></a>
		</p>
	  </div>
	</div>
  </article>

  <article class="strips__strip">
	<div class="strip__content">
	  <h1 class="strip__title" data-name="Dolor">Go</h1>
	  <div class="strip__inner-text">
		<h2>Ettrics</h2>
		<p>微博</p>
		<p>
		  <a href="http://weibo.com/u/3799279862/home?wvr=5" target="_blank"><i class="fa fa-weibo"></i></a>
		</p>
	  </div>
	</div>
  </article>

  <article class="strips__strip">
	<div class="strip__content">
	  <h1 class="strip__title" data-name="Sit">Inside</h1>
	  <div class="strip__inner-text">
		<h2>Ettrics</h2>
		<p>微信</p>
		<p>
		  <a href="https://wx.qq.com/" target="_blank"><i class="fa fa-weixin"></i></a>
		</p>
	  </div>
	</div>
  </article>

  <article class="strips__strip">
	<div class="strip__content">
	  <h1 class="strip__title" data-name="Amet">Here</h1>
	  <div class="strip__inner-text">
		<h2>Ettrics</h2>
		<p>Facebook</p>
		<p>
		  <a href="https://www.facebook.com/" target="_blank"><i class="fa fa-leaf"></i></a>
		</p>
	  </div>
	</div>
  </article>
  <i class="fa fa-close strip__close"></i>
</section>

<script src="js/jquery-1.8.3.min.js"></script>
<script>
var Expand = function () {
	var tile = $('.strips__strip');
	var tileLink = $('.strips__strip > .strip__content');
	var tileText = tileLink.find('.strip__inner-text');
	var stripClose = $('.strip__close');
	var expanded = false;
	var open = function () {
		var tile = $(this).parent();
		if (!expanded) {
			tile.addClass('strips__strip--expanded');
			tileText.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
			stripClose.addClass('strip__close--show');
			stripClose.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
			expanded = true;
		}
	};
	var close = function () {
		if (expanded) {
			tile.removeClass('strips__strip--expanded');
			tileText.css('transition', 'all 0.15s 0 cubic-bezier(0.23, 1, 0.32, 1)');
			stripClose.removeClass('strip__close--show');
			stripClose.css('transition', 'all 0.2s 0s cubic-bezier(0.23, 1, 0.32, 1)');
			expanded = false;
		}
	};
	var bindActions = function () {
		tileLink.on('click', open);
		stripClose.on('click', close);
	};
	var init = function () {
		bindActions();
	};
	return { init: init };
}();
Expand.init();
</script>
<!-- 代码部分end -->

</body>
</html>